import { Table, Modal, Button, Tag } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import React, { useState, useEffect } from 'react';
import { menudelete,} from '../../request/app'

export default function Content(porps) {
    const { confirm } = Modal;

    const columns = [
        {
            title: '菜单编号',
            dataIndex: 'id',
        },
        {
            title: '菜单名称',
            dataIndex: 'title',
        },
        {
            title: '上级菜单',
            dataIndex: 'pid',
            render: (a, b) => {
                // console.log(b, '77777');
                if (b.pid == 0) {
                    // console.log('开启');
                    return (
                        <Tag color="#f50">顶级菜单</Tag>
                    )
                } else if (b.pid == 1) {
                    return (
                        <Tag color="#87d068">系统管理</Tag>
                    )
                } else {
                    return (
                        <Tag color="#108ee9">商城管理</Tag>
                    )
                }
            }
        },
        {
            title: '菜单图标',
            dataIndex: 'icon',
        },
        {
            title: '菜单地址',
            dataIndex: 'url',
        },
        {
            title: '状态',
            dataIndex: 'address',
            render: (a, b) => {
                // console.log(b, '77777');
                if (b.status == 1) {
                    // console.log('开启');
                    return (

                        <Tag color="#2db7f5">开启</Tag>

                    )
                } else {
                    return (
                        <Tag color="#f50">禁用</Tag>

                    )
                }
            }
        },
        {
            title: '操作',
            dataIndex: 'address',
            render: (k, v) =>
                <div>
                    <Button type="primary" onClick={edit.bind(k, v)}>修改</Button>
                    &nbsp;
                    &nbsp;
                    <Button type="primary" onClick={del.bind(k, v)} danger>删除</Button>
                </div>
        },
    ];

    function edit(e) {
        // console.log('修改');
        // console.log(e.id);   
        // console.log(porps,'porps');
        porps.add('edit', e.id)

    }

    // 删除事件
    function del(e) {
        console.log(e.id);
        confirm({
            title: '是否删除该菜单',
            icon: <ExclamationCircleOutlined />,
            okText: '删除',
            okType: 'danger',
            cancelText: '再想想',
            async onOk(k, v) {
                // console.log(k);
                // console.log(v);
                // console.log('删除');

                await menudelete(
                    { id: e.id }
                ).then(res => {
                    // console.log(res);
                    porps.shoplist()
                })

            },
            onCancel() {
                console.log('取消');
            },
        });
    }
    return (
        <div>
            <Table
                columns={columns}
                dataSource={porps.data}
                bordered
            />
        </div>
    )
}